<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>抽奖free版 - 南风工作室</title>
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/base.css">
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/screen_lottery_free.css">
<style>
body {
    background: url(<?php if($activity['backdrop']){echo $_W['attachurl'].$activity['backdrop'];}else{ echo MODULE_URL.'template/mobile/images/box-bg.jpg'; } ?>) #5c0808 no-repeat !important;
    background-size: 100% 100% !important;
}
.display1{ display:none;}
</style>

<script src="<?php echo MODULE_URL;?>template/mobile/js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo MODULE_URL;?>template/mobile/js/lotter_free_base.js" type="text/javascript" charset="utf-8"></script>
<!----> 
</head>
<body class="FUN LOTTERY_FREE" >
<audio id="Audio_Running" src="<?php echo MODULE_URL;?>template/mobile/images/running-bg.mp3" loop preload="preload"></audio>
<audio id="Audio_Result" src="<?php echo MODULE_URL;?>template/mobile/images/result.mp3" preload="preload"></audio>
<div class="Panel Top">
    <div class="top_menu">
        <img class="activity_logo" src="<?php if($activity['logo']){echo $_W['attachurl'].$activity['logo'];}else{ echo MODULE_URL.'template/mobile/images/top-logo.png'; } ?>" onerror="this.src='<?php echo MODULE_URL;?>template/mobile/images/logo-top.png'" >
        <div class="top_title" style="font-size: 20px">
            <div>{$activity['title']}</div>      
        </div>
    </div>
</div>
<div class="Panel Lottery"  style="display: block;opacity: 1.0">
    <div class="table-box">
        <div class="table">
            <img class="seat-img1" src="<?php echo MODULE_URL;?>template/mobile/images/seat-img1.png">
            <img class="seat-img2" src="<?php echo MODULE_URL;?>template/mobile/images/seat-img2.png">
            <img class="seat-img4" src="<?php echo MODULE_URL;?>template/mobile/images/seat-img4.png">
            <img class="seat-img3" src="<?php echo MODULE_URL;?>template/mobile/images/seat-img3.png">
           
            <span class="table-num" id="jqDeskText">0</span>
            <div id="jqAddDeskAni" class="table-move">
                <span  id="jqDeskText1" class="table-move1">0</span>
            </div>
            <div class="table-button">
            <div class="table-btn display0">
            <p>最大号数：</p><input type="text" value="{$activity['num']}" size="6" id="zhmax" >
            </div>
                <div class="table-btn">
                    <p>中奖等级：</p>
                    <select id="sltAwardNum" >
                        <option value="请选择" selected="selected" style="display: none;">请选择</option>
                        {loop $items $val}
                        {php $levelname=array('1'=>'一等奖','2'=>'二等奖','3'=>'三等奖','4'=>'四等奖','5'=>'五等奖');}
                        <option value="{$val['limit_num']}">
                            {$levelname[$val['level']]}</option>
                        {/loop}
                    </select>
                </div>
                <button id="jqStart" onclick="Start();">开始抽奖</button>
                <button id="jqEnd" class="hide" onclick="End();">停止抽奖</button>
                <div class="clear"></div>
            </div>
        </div>
        <div class="table-win">
                <ul class="table-list" id="jqResultBox" >
            </ul>
        </div>
    </div> 
</div>
 <style>
body {background: url(<?php echo MODULE_URL;?>template/mobile/images/9.jpg) #000;background-size: cover;}
</style>
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/footer.css">
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/skin.css">
 <style>
</style>

<div class="Panel Bottom"  >
<div class="bottommenu" >
    <img class="support_logo" src="<?php echo MODULE_URL;?>template/mobile/images/bottom-logo.png" onerror="this.src='images/logo-bottom.png'" >
    <div class="helperpanel pulse">
        <span class="ssgz">&nbsp;<span class="mp_account">&nbsp;</span></span> <span class="fs"> 活动主办方：<span class="activity_key">{$activity['originator']}</span>&nbsp;</span>
    </div>
    <div class="navbar">
        <ul class="navbarmenu">
            <li class="curr">
                <a class="neicon small navbaritem fullscreen" href="#"><img class="" src="<?php echo MODULE_URL;?>template/mobile/images/icons-002.png" >
                    <p>全屏</p>
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

<div class="loader" style="display: none;">
    <div class="icon"></div>
</div>
<script type="text/javascript">
    var audio_Running;
    var timerObj = null;
    var awardData = [];
    var numberData = [];
    var deskNum =parseInt($("#zhmax").val());
    setzhmaxarr();
    function setzhmaxarr(){
        deskNum = parseInt($("#zhmax").val());
        for (var i = 0; i <  deskNum; i++) {
            numberData[i] = i+1;
        }
    }
    function Start() {
        deskNum = parseInt($("#zhmax").val());
        setzhmaxarr();
        console.log(numberData);
        $("#jqResultBox").html("");
        var awardNum = parseInt($("#sltAwardNum").val()) || 0;
        clearInterval(timerObj);
        if (deskNum <= 0) {
            MyTool.Alert("未设置最大数量");
            return;
        }
        if (awardNum <= 0) {
            MyTool.Alert("请选择中奖等级");
            return;
        }
        $("#jqStart").attr("disabled", true);
        var b = document.getElementById("Audio_Running");
        if (b.play) {
            audio_Running = b
        }
        var a = document.getElementById("Audio_Result");
        if (a.play) {
            audio_GetOne = a
        }
        RandomDesk();
        GetAwardDesk(deskNum, awardNum);
    }
    function RandomDesk() {
        timerObj = setInterval(function () {
            var index = Math.floor(Math.random() * deskNum);
            var n = numberData[index];
            $("#jqDeskText").text(n);
        }, 100);
    }
    function GetAwardDesk(deskNum, awardNum) {

        if (audio_Running) {
            audio_Running.play()
        }

        awardData = [];            
        for (var i = 0; i < awardNum&&deskNum>0; i++) {
            var index = Math.floor(Math.random() * (deskNum-i));
            awardData[i] = numberData[index];
            numberData.splice(index,1);
        }
        $("#jqStart").addClass("hide");
        $("#jqEnd").removeAttr("disabled").removeClass("hide");
    }
    function End() {
        if (audio_Running) {
            audio_Running.pause()
        }
        if (audio_GetOne) {
            audio_GetOne.play()
        }
        $("#jqAddDeskAni").removeClass("table-moving");
        var i = 0;
        var func = function () {
            clearInterval(timerObj);
            ShowResult(awardData[i]);
            i++;
            if (awardData.length > i) {
                setTimeout(function () {
                    RandomDesk();
                }, 500); //间隔
                setTimeout(function () {
                    func();
                }, 1000);
            } else {
                $("#jqEnd").addClass("hide");
                $("#jqStart").removeAttr("disabled").removeClass("hide");
            }
        };
        if (awardData.length > 0) {
            $("#jqEnd").attr("disabled", true);
            func();
        } else {
            clearInterval(timerObj);
            MyTool.Alert("号码已经抽完！", function () {
                $("#jqDeskText,#jqDeskText1").text(0);
                $("#jqEnd").addClass("hide");
                $("#jqStart").removeAttr("disabled").removeClass("hide");
            });
        }
    }
    function ShowResult(num) {
        $("#jqAddDeskAni").addClass("table-moving");
        $("#jqDeskText,#jqDeskText1").text(num);
        var liHtml = '<li>' + num + '</li>';
        setTimeout(function () {
            $("#jqAddDeskAni").removeClass("table-moving");
            $("#jqResultBox").prepend(liHtml);
        }, 900);
    }
</script>
 
</body>
</html>